<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="" id="province">
        <option value="">请选择省份</option>
    </select>
    <select name="" id="city">
        <option value="">请选择市</option>

    </select>
    <select name="" id="area">
        <option value="">请选择区、县</option>

    </select>

    <div>
        <select name="" id="college">
            <option value="">请选择学院</option>
        </select>
        <select name="" id="major">
            <option value="">请选择专业</option>

        </select>
        <select name="" id="classNumber">
            <option value="">请选择班级</option>

        </select>
    </div>

    <script src="./省市区、学院、学生数据.js"></script>
    <script>
        let province = document.getElementById("province");
        let city = document.getElementById("city");
        let area = document.getElementById("area");

        function threeStage(one,two,three,dataObj) {
            // 1.省份下拉列表聚焦时，加载所有省份选项
            one.onfocus = function () {
                // 清空省份下拉列表里面所有的选项
                one.options.length=0;
                // 遍历中国省市区对象cities，获取所有省份
                for (let i in dataObj) {
                    let newOption = new Option(i, i);
                    one.options.add(newOption);
                }
            }

            // 2.当省分下拉列表的值发生改变时，市和区县下拉列表的值跟着改变
            one.onchange = function () {
                // 获取选择的省份
                let pro = one.value;
                // 清空市下拉列表里面的选项
                two.options.length = 0;
                // 根据省份在对象中获取市
                for (let i in dataObj[pro]) {
                    let newOption = new Option(i, i);
                    two.options.add(newOption);
                }
                // 获取选择的市
                let cy = two.value;
                // 清空区县下拉列表里面的选项
                three.options.length = 0;
                // 根据省和市，在对象中获取区县
                for (let i = 0; i < dataObj[pro][cy].length; i++) {
                    let newOption = new Option(dataObj[pro][cy][i], dataObj[pro][cy][i]);
                    three.options.add(newOption);
                }
            }

            // 3.当市下拉列表的值发送改变时，区县的选项跟着改变
            two.onchange = function () {
                // 获取选择的省份
                let pro = one.value;
                // 获取选择的市
                let cy = two.value;
                // 清空区县下拉列表里面的选项
                three.options.length = 0;
                // 根据省和市，在对象中获取区县
                for (let i = 0; i < dataObj[pro][cy].length; i++) {
                    let newOption = new Option(dataObj[pro][cy][i], dataObj[pro][cy][i]);
                    three.options.add(newOption);
                }


            }

        }

        threeStage(province,city,area,cities);

        let col = document.getElementById("college");
        let major = document.getElementById("major");
        let classNumber = document.getElementById("classNumber");

        threeStage(col,major,classNumber,college);

    </script>
</body>

</html>